<template>
  <div>
    <div class="sidebar" v-show="sidebarShow">
      <div class="sidebar-ad">
        <img :class="recomImgMode1 == 1?'recom_img_mode1':'recom_img'" :src="recomImg1" alt="" @click="goArticle(recomImgId1)">
      </div>
      <div class="sidebar-ad">
        <img :class="recomImgMode2 == 1?'recom_img_mode1':'recom_img'" :src="recomImg2" alt="" @click="goArticle(recomImgId2)">
      </div>
    </div>
    <div :class="sidebarShow?'recom_box':'recom_box2'">
      <ul>
        <li class="recom_b" v-show="recomUl.length != 0">
          <div class="recom_title">
            <h2>推荐文章</h2>
          </div>
          <div class="spin_box">
            <a-spin :spinning="spinningLoading"/>
          </div>
          <ul>
            <li class="recom_li" v-for="(item, i) in recomUl" :key="i" @click="goArticle(item.id)">
              <div class="recom_li_val"><a class="a_hover">{{ item.title }}</a></div>
              <span class="recom_li_time">{{ item.time }}</span>
            </li>
          </ul>
        </li>
        <li class="recom_b" v-show="newUl.length != 0">
          <div class="recom_title">
            <h2>最新文章</h2>
          </div>
          <div class="spin_box">
            <a-spin :spinning="spinningLoading"/>
          </div>
          <ul>
            <li class="recom_li" v-for="(item, i) in newUl" :key="i" @click="goArticle(item.id)">
              <div class="recom_li_val"><a class="a_hover">{{ item.title }}</a></div>
              <span class="recom_li_time">{{ item.time }}</span>
            </li>
          </ul>
        </li>
        <li class="recom_b" v-show="tagUl.length != 0">
          <div class="recom_title">
            <h2>标签列表</h2>
          </div>
          <div class="spin_box">
            <a-spin :spinning="spinningLoading"/>
          </div>
          <ul class="tags_ul">
            <li v-for="(item, i) in tagUl" :key="i"  @click="goTabList(item.id,item.title)">
              <span class="recom_tags"><a class="a_hover">{{ item.title }}</a></span>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Slime } from '@/mixins/slime';
import { getIndex } from "@/api/blog";
export default {
  mixins: [Slime],
  props: ["item"],
  name: "gamePlayer",
  data() {
    return {
      recomImg1:require("@/assets/img/defaultdll.png"),
      recomImgId1:0,
      recomImgMode1:0,
      recomImg2:require("@/assets/img/defaultdll.png"),
      recomImgId2:0,
      recomImgMode2:0,
      recomUl: [
        // {
        //   title: "画中画的任画中画的任画中画的任画中画的任",
        //   time: "05-01",
        // },
      ],
      newUl:[],
      tagUl:[],
      //文章加载
      spinningLoading:false,
      sidebarShow:true,
    };
  },
  created() {
    this.init();
    if(this.$route.path == '/index'){
      this.sidebarShow = true;
    }else{
      this.sidebarShow = false;
    }
  },
  watch: {
    '$route' (to, from) {   //监听路由是否变化
      console.log(to)
      if(to.path == '/index'){
        this.sidebarShow = true;
      }else{
        this.sidebarShow = false;
      }
    }
  },
  methods: {
    init(){
      this.spinningLoading = true;
      getIndex().then(
        (res) => {
          let data = res.result;
          this.recomImg1 = this.imgD(data,4);
          this.recomImgId1 = this.idD(data,4);
          this.recomImgMode1 = this.modeD(data,4);
          this.recomImg2 = this.imgD(data,5);
          this.recomImgId2 = this.idD(data,5);
          this.recomImgMode2 = this.modeD(data,5);
          //
          this.recomUl = data.side.map((obj) => {
            obj = {
              id: obj.id,
              title: obj.title?obj.title:'尚未填写',
              time: obj.updateTime,
            }
            return obj
          })
          this.newUl = data.new.map((obj) => {
            obj = {
              id: obj.id,
              title: obj.title?obj.title:'尚未填写',
              time: obj.updateTime,
            }
            return obj
          })
          this.tagUl = data.tag.map((obj) => {
            obj = {
              id: obj.id,
              title: obj.name,
            }
            return obj
          })
        },
        (err) => {
          this.$message.warning("获取失败");
        }
      ).finally(() => {
        this.spinningLoading = false;
      });
    },
    goList(id,name){
      this.$router.push({ path: '/articleList?id='+id+'&name='+name})
    },
    goTabList(id,name){
      this.$router.push({ path: '/articleList?tagId='+id+'&name='+name})
    }
  },
};
</script>

<style scoped>
.sidebar{
  margin: 20px 0px;
}
.sidebar-ad{
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
}
.sidebar-ad img{
  height: 185px;
}
.recom_img{
  width: 100%;
  border-radius: 4px;
  height: 185px;
}
.recom_img_mode1{
  max-width: 100%;
  border-radius: 4px;
  height: 185px;
}
.recom_box {
  margin-top: 31px;
}
.recom_box2 {
  margin-top: 50px;
}
.recom_b {
  display: block;
  clear: both;
  margin-bottom: 20px;
  background: white;
  padding-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
}
.recom_title {
  clear: both;
  float: left;
  width: 336px;
  margin-bottom: 8px;
  padding-top: 15px;
}
.recom_title h2 {
  float: left;
  font-size: 20px;
  display: inline;
  margin-top: 4px;
  padding-bottom: 4px;
  margin-bottom: -2px;
  line-height: 20px;
  overflow: hidden;
  border-left: 4px solid #1890ff;
  padding-left: 15px;
  font-weight: normal;
}
.recom_li {
  display: block;
  clear: both;
  font-size: 14px;
  line-height: 24px;
  list-style: none;
  padding: 2px 20px;
  position: relative;
}
.recom_li_val {
  margin-right: 30px;
  white-space:nowrap;
  overflow: hidden;
}
.recom_li_time {
  color: #aaa;
  font-size: 12px;
  position: absolute;
  top: 3px;
  right: 10px;
}
.tags_ul{
  padding: 2px 20px;
}
.recom_tags{
  margin-right: 10px;
}
</style>